<<<<<<< HEAD
<html>
<head>
    <title>html 文档结构 </title>
    <link rel="stylesheet" href="index.css"/>
</head>

<body style="color:darkorchid;">
    <div class="main">
        <div class="row">
        <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
        <input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
        <input type="button" name="bt" id="button2" value="确认2"/>
        </div>
        <div id="todogroup">
        <!--<div id="todo0"><input type="checkbox" name="todocheck">ikun<button type="button" onclick="delectByIndex">删除</button></div>-->
        <!--<div>wdcr</div>-->
        <!--这里面 todo项-->
        </div>
        <div id = 'xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">浙&nbsp;商&nbsp;大</div>
    </div>
</body>

<script lang="javascript">

    var intCnt = 0;

    function init(){
        document.getElementById("button2").onclick=handleClick;
    }

    function keyup(e){
        if(e.key == "Enter")
        handleClick(e);
    }

    function handleClick(e){
        console.log('handleClick');
        console.log(e);
        var temp = getValue();
        //var div= document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").innerHTML +="<div>"+temp+"</div>"
        //document.getElementById("todogroup").append(div);
        //追加44行一样的div
        //把input输入框内的数据清空
        document.getElementById("todogroup").innerHTML +="<div class='item' id='todo"
            +intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"
            +temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("
            +intCnt+")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
    // document.getElementsByClassName("main")[0].style="background-color; #333333;";
    }

    function getValue(){
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }

    function deletByIndex(index){
        document.getElementById("todo"+index).remove();
    }

    function enter(id){
        document.getElementById(id).style='background-color:#eac9c9'
    }

    function leave(id){
        document.getElementById(id).style='background-color:#ffffff'
    }
    init();
</script>

<style>
    body{
    display:flex;
    justify-content: center;
    align-items:center;
    min-height: 100vh;
    }

    .main{
    /*background-color: cyan;
    height: 200px;*/
    padding: 8px;
    border: 1px solid #eac9c9;
    border-radius: 8px;
    }

    .row{
    display:flex; 
    }

    .item{
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
        background-color: aliceblue;

    }

    .item:hover{
        background-color: #b1afaf;
    }

    .item-value{
        flex-grow: 1;
        color: black;
    }

    .item-del{
        color: aliceblue;

        background-color: rgb(15, 131, 88);

        border: 0px;

        opacity: 0;
    }

    .item:hover .item-del{
        opacity: 1;
    }

    .input{
        padding: 8px;

        outline: none;
        border: 2px solid #b1afaf;
    }

    .input:focus{
        box-shadow: 0px 0px 10px #587ad6;
        border: 2px solid #607ed1;
    }
</style>
</html>


=======
<<<<<<< HEAD
<html>
<head>
    <title>html 文档结构 </title>
    <link rel="stylesheet" href="index.css"/>
</head>

<body style="color:darkorchid;">
    <div class="main">
        <div class="row">
        <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
        <input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
        <input type="button" name="bt" id="button2" value="确认2"/>
        </div>
        <div id="todogroup">
        <!--<div id="todo0"><input type="checkbox" name="todocheck">ikun<button type="button" onclick="delectByIndex">删除</button></div>-->
        <!--<div>wdcr</div>-->
        <!--这里面 todo项-->
        </div>
        <div id = 'xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">浙&nbsp;商&nbsp;大</div>
    </div>
</body>

<script lang="javascript">

    var intCnt = 0;

    function init(){
        document.getElementById("button2").onclick=handleClick;
    }

    function keyup(e){
        if(e.key == "Enter")
        handleClick(e);
    }

    function handleClick(e){
        console.log('handleClick');
        console.log(e);
        var temp = getValue();
        //var div= document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").innerHTML +="<div>"+temp+"</div>"
        //document.getElementById("todogroup").append(div);
        //追加44行一样的div
        //把input输入框内的数据清空
        document.getElementById("todogroup").innerHTML +="<div class='item' id='todo"
            +intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"
            +temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("
            +intCnt+")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
    // document.getElementsByClassName("main")[0].style="background-color; #333333;";
    }

    function getValue(){
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }

    function deletByIndex(index){
        document.getElementById("todo"+index).remove();
    }

    function enter(id){
        document.getElementById(id).style='background-color:#eac9c9'
    }

    function leave(id){
        document.getElementById(id).style='background-color:#ffffff'
    }
    init();
</script>

<style>
    body{
    display:flex;
    justify-content: center;
    align-items:center;
    min-height: 100vh;
    }

    .main{
    /*background-color: cyan;
    height: 200px;*/
    padding: 8px;
    border: 1px solid #eac9c9;
    border-radius: 8px;
    }

    .row{
    display:flex; 
    }

    .item{
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
        background-color: aliceblue;

    }

    .item:hover{
        background-color: #b1afaf;
    }

    .item-value{
        flex-grow: 1;
        color: black;
    }

    .item-del{
        color: aliceblue;

        background-color: rgb(15, 131, 88);

        border: 0px;

        opacity: 0;
    }

    .item:hover .item-del{
        opacity: 1;
    }

    .input{
        padding: 8px;

        outline: none;
        border: 2px solid #b1afaf;
    }

    .input:focus{
        box-shadow: 0px 0px 10px #587ad6;
        border: 2px solid #607ed1;
    }
</style>
</html>


=======
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> d376503 (饶驿婷)
<html>
<head>
    <title>html 文档结构 </title>
    <link rel="stylesheet" href="index.css"/>
</head>

<body style="color:darkorchid;">
    <div class="main">
        <div class="row">
        <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
        <input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
        <input type="button" name="bt" id="button2" value="确认2"/>
        </div>
        <div id="todogroup">
        <!--<div id="todo0"><input type="checkbox" name="todocheck">ikun<button type="button" onclick="delectByIndex">删除</button></div>-->
        <!--<div>wdcr</div>-->
        <!--这里面 todo项-->
        </div>
        <div id = 'xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">浙&nbsp;商&nbsp;大</div>
    </div>
</body>

<script lang="javascript">

    var intCnt = 0;

    function init(){
        document.getElementById("button2").onclick=handleClick;
    }

    function keyup(e){
        if(e.key == "Enter")
        handleClick(e);
    }

    function handleClick(e){
        console.log('handleClick');
        console.log(e);
        var temp = getValue();
        //var div= document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").innerHTML +="<div>"+temp+"</div>"
        //document.getElementById("todogroup").append(div);
        //追加44行一样的div
        //把input输入框内的数据清空
        document.getElementById("todogroup").innerHTML +="<div class='item' id='todo"
            +intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"
            +temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("
            +intCnt+")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
    // document.getElementsByClassName("main")[0].style="background-color; #333333;";
    }

    function getValue(){
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }

    function deletByIndex(index){
        document.getElementById("todo"+index).remove();
    }

    function enter(id){
        document.getElementById(id).style='background-color:#eac9c9'
    }

    function leave(id){
        document.getElementById(id).style='background-color:#ffffff'
    }
    init();
</script>

<style>
    body{
    display:flex;
    justify-content: center;
    align-items:center;
    min-height: 100vh;
    }

    .main{
    /*background-color: cyan;
    height: 200px;*/
    padding: 8px;
    border: 1px solid #eac9c9;
    border-radius: 8px;
    }

    .row{
    display:flex; 
    }

    .item{
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
        background-color: aliceblue;

    }

    .item:hover{
        background-color: #b1afaf;
    }

    .item-value{
        flex-grow: 1;
        color: black;
    }

    .item-del{
        color: aliceblue;

        background-color: rgb(15, 131, 88);

        border: 0px;

        opacity: 0;
    }

    .item:hover .item-del{
        opacity: 1;
    }

    .input{
        padding: 8px;

        outline: none;
        border: 2px solid #b1afaf;
    }

    .input:focus{
        box-shadow: 0px 0px 10px #587ad6;
        border: 2px solid #607ed1;
    }
</style>
</html>


<<<<<<< HEAD
=======
=======
<<<<<<< HEAD
<html>
<head>
    <title>html 文档结构 </title>
    <link rel="stylesheet" href="index.css"/>
</head>

<body style="color:darkorchid;">
    <div class="main">
        <div class="row">
        <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
        <input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
        <input type="button" name="bt" id="button2" value="确认2"/>
        </div>
        <div id="todogroup">
        <!--<div id="todo0"><input type="checkbox" name="todocheck">ikun<button type="button" onclick="delectByIndex">删除</button></div>-->
        <!--<div>wdcr</div>-->
        <!--这里面 todo项-->
        </div>
        <div id = 'xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">浙&nbsp;商&nbsp;大</div>
    </div>
</body>

<script lang="javascript">

    var intCnt = 0;

    function init(){
        document.getElementById("button2").onclick=handleClick;
    }

    function keyup(e){
        if(e.key == "Enter")
        handleClick(e);
    }

    function handleClick(e){
        console.log('handleClick');
        console.log(e);
        var temp = getValue();
        //var div= document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").innerHTML +="<div>"+temp+"</div>"
        //document.getElementById("todogroup").append(div);
        //追加44行一样的div
        //把input输入框内的数据清空
        document.getElementById("todogroup").innerHTML +="<div class='item' id='todo"
            +intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"
            +temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("
            +intCnt+")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
    // document.getElementsByClassName("main")[0].style="background-color; #333333;";
    }

    function getValue(){
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }

    function deletByIndex(index){
        document.getElementById("todo"+index).remove();
    }

    function enter(id){
        document.getElementById(id).style='background-color:#eac9c9'
    }

    function leave(id){
        document.getElementById(id).style='background-color:#ffffff'
    }
    init();
</script>

<style>
    body{
    display:flex;
    justify-content: center;
    align-items:center;
    min-height: 100vh;
    }

    .main{
    /*background-color: cyan;
    height: 200px;*/
    padding: 8px;
    border: 1px solid #eac9c9;
    border-radius: 8px;
    }

    .row{
    display:flex; 
    }

    .item{
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
        background-color: aliceblue;

    }

    .item:hover{
        background-color: #b1afaf;
    }

    .item-value{
        flex-grow: 1;
        color: black;
    }

    .item-del{
        color: aliceblue;

        background-color: rgb(15, 131, 88);

        border: 0px;

        opacity: 0;
    }

    .item:hover .item-del{
        opacity: 1;
    }

    .input{
        padding: 8px;

        outline: none;
        border: 2px solid #b1afaf;
    }

    .input:focus{
        box-shadow: 0px 0px 10px #587ad6;
        border: 2px solid #607ed1;
    }
</style>
</html>


=======
<html>
<head>
    <title>html 文档结构 </title>
    <link rel="stylesheet" href="index.css"/>
</head>

<body style="color:darkorchid;">
    <div class="main">
        <div class="row">
        <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
        <input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
        <input type="button" name="bt" id="button2" value="确认2"/>
        </div>
        <div id="todogroup">
        <!--<div id="todo0"><input type="checkbox" name="todocheck">ikun<button type="button" onclick="delectByIndex">删除</button></div>-->
        <!--<div>wdcr</div>-->
        <!--这里面 todo项-->
        </div>
        <div id = 'xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">浙&nbsp;商&nbsp;大</div>
    </div>
</body>

<script lang="javascript">

    var intCnt = 0;

    function init(){
        document.getElementById("button2").onclick=handleClick;
    }

    function keyup(e){
        if(e.key == "Enter")
        handleClick(e);
    }

    function handleClick(e){
        console.log('handleClick');
        console.log(e);
        var temp = getValue();
        //var div= document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").innerHTML +="<div>"+temp+"</div>"
        //document.getElementById("todogroup").append(div);
        //追加44行一样的div
        //把input输入框内的数据清空
        document.getElementById("todogroup").innerHTML +="<div class='item' id='todo"
            +intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"
            +temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("
            +intCnt+")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
    // document.getElementsByClassName("main")[0].style="background-color; #333333;";
    }

    function getValue(){
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }

    function deletByIndex(index){
        document.getElementById("todo"+index).remove();
    }

    function enter(id){
        document.getElementById(id).style='background-color:#eac9c9'
    }

    function leave(id){
        document.getElementById(id).style='background-color:#ffffff'
    }
    init();
</script>

<style>
    body{
    display:flex;
    justify-content: center;
    align-items:center;
    min-height: 100vh;
    }

    .main{
    /*background-color: cyan;
    height: 200px;*/
    padding: 8px;
    border: 1px solid #eac9c9;
    border-radius: 8px;
    }

    .row{
    display:flex; 
    }

    .item{
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
        background-color: aliceblue;

    }

    .item:hover{
        background-color: #b1afaf;
    }

    .item-value{
        flex-grow: 1;
        color: black;
    }

    .item-del{
        color: aliceblue;

        background-color: rgb(15, 131, 88);

        border: 0px;

        opacity: 0;
    }

    .item:hover .item-del{
        opacity: 1;
    }

    .input{
        padding: 8px;

        outline: none;
        border: 2px solid #b1afaf;
    }

    .input:focus{
        box-shadow: 0px 0px 10px #587ad6;
        border: 2px solid #607ed1;
    }
</style>
</html>


>>>>>>> 861c01f (饶驿婷)
>>>>>>> 4a7ce3a (饶驿婷)
>>>>>>> d376503 (饶驿婷)
>>>>>>> ceff70e (饶驿婷)
>>>>>>> f4551b3 (饶驿婷)
